import React, { Component } from "react";
import styles from "./Category.module.scss";
import json_data from "../../mock/cookbook-category.json";
// import { getCategories} from "../../data/api";
// import { withRouter } from "react-router-dom";

// class Category extends Component {

//     state = {
//       categories:[],// 全部的分类的信息 
//       select_index:0,
//       rightContent:[] // 右边的内容项
//     }
//     async componentDidMount(){
//       let res = await getCategories();
//       console.log(res,res[0].sub_categories);
//       this.setState({
//         categories:res,
//         rightContent:res[0]
//       })
//     }
//     handleItemClick=(e) => {
//       let {index} = e.target.dataset;
//     //   console.log(e.target.dataset);
//       // console.log(index);
//       index = parseInt(index);
//       this.setState({
//         select_index:index,
//         rightContent:this.state.categories[index]
//       })
//     }
//     // 分类菜单右边点击跳转逻辑
//     handleProductItemClick = (cid) => {
//       this.props.history.push("goodList?cid="+cid);
//     }
    
    
//     render() {
//       return (
//         <div className={styles.ykCategory}>
//           <div className={styles.ykCategoryContent}>
//             {/* 左边的目录区开始 */}
//             <div className={styles.categoryContentLeft} onClick={this.handleItemClick}>
//                 {
//                   this.state.categories.map((c,index)=>{
//                     return <div data-index={index}
//                         className={this.state.select_index===index?styles.contentLeftItem+" "+styles.active:styles.contentLeftItem} key={c.ids}>
//                          {c.name}
//                     </div>
//                   })
//                 }
//             </div>
//             {/* 左边的目录区结束 */}
//             {/* 右边的内容区开始 */}
//             <div className={styles.categoryContentRight}>
//             {
//               this.state.rightContent.sub_categories&&this.state.rightContent.sub_categories.map((v,i)=>{
//                 return <div className={styles.contentRightItem} key={v.image_url}>
//                     <div className={styles.rightItemTitle}>
//                       {v.name}
//                     </div>
//                 </div>
//               })
//               //
//             }
//             </div>
//             {/* 右边的内容区结束 */}
//           </div>
//         </div>
//       );
//     }
//   }
//   export default withRouter(Category)




export default class Category extends Component {
  state = {
    categories: [], // 全部的分类的信息
    datasource: null,
    currentItem: "",
    select_index:0,
  };

  async componentDidMount() {
    // let res = await getCategories();
    // console.log(res);

    this.setState({
      datasource: json_data.data,
      currentItem: "热门",
    //   categories: res,
    });
  }
  handleItem = (item) => {
    return () => {
      this.setState({
        currentItem: item,
      });
    };
  };

  handleItemClick=(e) => {
    let {index} = e.target.dataset;
    // console.log(index);
    index = parseInt(index);
    this.setState({
      select_index:index,
      rightContent:this.state.categories[index]
    })
  }

  render() {
    let data = this.state.datasource
      ? Object.keys(this.state.datasource["category"])
      : [];
    let contents = this.state.datasource
      ? this.state.datasource["category"][this.state.currentItem]
      : [];

    return (
      <div className={styles.category}>
        {/* 分类左侧开始 */}
        <div className={styles.category_left}>
          <ul>
            {/* <li>热门</li>
                        <li className={styles.active}>菜式</li> */}
            {
                            data.map(val=>{
                                return (
                                 this.state.currentItem===val? 
                                 <li key={val} className={styles.active}>{val}</li>:
                                 <li key={val} onClick={this.handleItem(val)}>{val}</li>  
                                )
                            })
                        }
            {/* {this.state.categories.map((c, index) => {
              return (
                <div
                  data-index={index}
                  className={
                    this.state.select_index === index
                      ? " active"
                      : ""
                  }
                  key={c.id}
                >
                  {c.title}
                </div>
              );
            })} */}
          </ul>
        </div>
        {/* 分类左侧结束 */}
        {/* 分类右侧开始 */}
        <div className={styles.category_right}>
          <ul>
            {contents.map((value) => {
              return <li key={value}>{value}</li>;
            })}
          </ul>
        </div>
        {/* 分类右侧结束 */}
      </div>
    );
  }
}
